<template>
	<view class="page home-page">
		<!-- <status-bar ref='statusbar' :title='title' back='0' :hideBg='hideBg' :isHome='pageID' :search='searchType'></status-bar> -->
		<backTop v-if='toTop'></backTop>
		
		<!-- 1首页 1-->
		<home ref='home' @sortListData='sortListData' v-show="pageID == 1"></home>
		
		<!-- 2我的 1-->
		<user ref='user' v-show="pageID == 2" :title='title'></user>
		
		
		<!--  学习 -->
		<videoClass ref='pays' v-show="pageID == 99" ></videoClass>
		
		<!--  测评 -->
		<uation ref="uation" v-show="pageID == 100"></uation>
		
		<!-- 3分类 1-->
		<template v-if='Ids.indexOf(",3,") > 0'>
			<classify ref='classify' tab='1' v-show="pageID == 3" :title='title'></classify>
		</template>
		
		<!-- 4点餐 -->
		<template v-if='Ids.indexOf(",4,") > 0'>
			<repast ref='repast' tab='1' v-show="pageID == 4" :title='title'></repast>
		</template>
		
		<!-- 5门店 1-->
		<template v-if='Ids.indexOf(",5,") > 0'>
			<storeList tab='1' ref='storeList' v-show="pageID == 5" :title='title'></storeList>
		</template>
		
		<!-- 5.1门店(美业专属) 1-->
		<template v-if='Ids.indexOf(",5.1,") > 0'>
			<store tab='1' v-if="pageID == 5.1"></store>
		</template>
		
		<!-- 6预约 1-->
		<template v-if='Ids.indexOf(",6,") > 0'>
			<reserve ref='reserve' v-show="pageID == 6" :title='title'></reserve>
		</template>
		
		<!-- 7购物车 1-->
		<template v-if='Ids.indexOf(",7,") > 0'>
			<cart ref='cart' v-show="pageID == 7" :title='title'></cart>
		</template>
		
		<!-- 8post 1-->
		<template v-if='Ids.indexOf(",8,") > 0'>
			<post ref='post' v-show="pageID == 8" :title='title'></post>
		</template>
		
		
		<!-- 9微官网 1-->
		<template v-if='Ids.indexOf(",9,") > 0'>
			<artList tab='1' ref='artList' v-show="pageID == 9" :title='title'></artList>
		</template>
		
	
		
		<!-- 12 芬霄中心 1-->
		<template v-if='Ids.indexOf(",12,") > 0'>
			<distributors  ref='fenxiao' v-show="pageID == 12" :title='title'></distributors>
		</template>
		
		
	
		<view class="tabbar-box">
			<view class="tabbar flex-box align-center" >
				<view  v-for="(item,index) in lists" :key="index" 
				      @click="change(item.id,item.title,item.tab)">
					<image :src="item.tab == tabbar?imgUrl+item.imgs:imgUrl+item.img" mode="aspectFit" class="icon"></image>
					<text :class="{thmeColor: item.tab == tabbar}" >{{item.title}}</text>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import reserve from '../reserve/reserve'
	import home from '../home/home'

	import videoClass from '../ply/ply'
	import uation from '../uation/uation'
	
	import user from '../user/user'
	import classify from '../classify/classify'
	import repast from '../classify/repast'
	import store from '../store/storeMY'
	
	import cart from '../cart/singleCart'
	import post from '../post/postIndex'
	import artList from '../article/artList'
	import storeList from '../store/storeList'
	
	import distributors from '../distributors/fenxiaoCenter'
	// import gameList from '../lottery/gameList'
	import API from '../../api/index.js'
	import {mapState,mapMutations} from 'vuex'
	var that
	export default {
		components:{
			home,
			user,
			classify,
			repast,
			store,
			reserve,
			cart,
			post,
			artList,
			storeList,
			videoClass,
			uation,
			// gameList,
			distributors,
			
		},
		data() {
			return {
				lists:[
					{
						id: 1,
						tab:1,
						title:'首页',
						img:'/singleSaleShopH5/img/h1.png',
						imgs:'/singleSaleShopH5/img/h11.png',
						
					},
					{
						id: 3,
						tab:2,
						title:'商城',
						img:'/singleSaleShopH5/img/s1.png',
						imgs:'/singleSaleShopH5/img/s11.png',
					},
					{
						id: 99,
						tab:3,
						title:'学习',
						img:'/singleSaleShopH5/img/l1.png',
						imgs:'/singleSaleShopH5/img/l11.png',
					},{
						id: 7,
						tab:4,
						title:'购物车',
						img:'/singleSaleShopH5/img/g1.png',
						imgs:'/singleSaleShopH5/img/g11.png',
					},
					{
						id: 2,
						tab:5,
						title:'我的',
						img:'/singleSaleShopH5/img/m1.png',
						imgs:'/singleSaleShopH5/img/m11.png',
					}
				],
				
				color: getApp().globalData.color,
				color_aid: getApp().globalData.color_aid,
				toTop: false,
				imgUrl:this.imgUrl,
				staticUrl: this.staticUrl,
				pageID: '',
				hideCat: getApp().globalData.hideCat, // 是否关闭猫咪
				lesson_config: uni.getStorageSync('startUp').lesson_config,// 首页是否显示课程入口
				
				navHeight:getApp().globalData.navHeight,
				
				bid: uni.getStorageSync('bid'),
				scrollTop:0,
				sortListData_: false,

				colorNum: 1,
				Ids:",1,2,3,7,",
				title: '',
				loading: true,
				
				goodsName: uni.getStorageSync('startUp').nameDefinition.goodsName,
			};
		},
		onShow() {
			that = this
			console.log(this.tabbar,'tabbar');
			let pageIndex = this.lists.findIndex(n=>n.tab == this.tabbar);
			this.pageID = this.lists[pageIndex].id;
				
		
			// #ifdef MP-WEIXIN
			uni.hideHomeButton()
			// #endif
			uni.setStorageSync('path', '')
			
		},
		onReady() {
			that = this
			
		},
		onLoad() {
			that = this
		},
		mounted() {
			that.init(that.pageID)
			that.loading = false
		},
		methods:{
			...mapMutations(['setTab']),
			toDetail(goods){
				this.toGoods(goods.goods_id)
			},
			setNavigationBarTitle(){
				that.list.forEach(item=>{
					if(item.id == that.pageID){
						that.title = item.title
						if(item.id == 1){
							that.title =  uni.getStorageSync('startUp').title
						}
						uni.setNavigationBarTitle({
							title: that.title
						})
					}
				})
			},
			toUrl(url, flag) { // flag:是否判断vid
				var vid = uni.getStorageSync('vid');
				if (flag && (!vid || vid == 0)) {
					that.showModal = true;
					return
				}
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			sortListData(e){
				that.sortListData_ = e
			},
			init(id){
				if(!uni.getStorageSync('vid')){
					that.getvid(id)
				}
				this.$nextTick(()=>{
					if(that.$refs.repast){
						that.$refs.repast.scrollTop = 1
					}
					if(id == 7){
						that.$refs.cart.getCart()
					}
					if(id == 1){
						that.$refs.home.getHomeData()
						that.$refs.home.getSwiperHeight()
						that.$refs.home.navFixed = false
						
					}
					if(id == 2){
						that.$refs.user.getUserinfo();
					}
					if(id == 99){
						that.$refs.pays.top_class();
					}
					if(id == 100){
						//that.$refs.uation.uation();  测评
					}
					
					if(id == 3){
						that.$refs.classify.topCategory()
						if(that.$refs.classify.onceLevel.length > 0){
							that.$refs.classify.goodsType()
						}
					}
					
					if(id == 4){
						that.$refs.repast.page = 1;
						that.$refs.repast.tabbarUpdate = true
						that.$refs.repast.scrollTop = 0
						that.$refs.repast.getCart()
					}
					if(id == 5){
						that.$refs.storeList.page = 1;
						that.$refs.storeList.storeList = [];
						that.$refs.storeList.topCategory();
					}
					if(id == 6){
						that.$refs.reserve.getList()
					}
					if(id == 8){
						that.$refs.post.getSort()
					}
					
					if(id == 9){
						that.$refs.artList.page = 1;
						that.$refs.artList.getCloumn()
					}
					if(id == 11){
						that.$refs.game.getList()
					}
					
					if(id == 12){
						let vid = uni.getStorageSync("vid");
						if(!vid || vid == 0){
							that.$refs.fenxiao.showModal = true
						}else{
							that.$refs.fenxiao.closeModel()
							that.$refs.fenxiao.my_income()
						}
					}
				})
			},
			getvid(id){
				// #ifdef H5
				API.user.getVid()
				return
				// #endif
				var openid = uni.getStorageSync("openid");
				if (openid) {
					API.user.getVid()
				} else {
					API.user.getOpenid().then(openid => {
						if(openid){
							API.user.getVid()
						}
					})
				}
			},
			change(id,title,tab){
				that.setTab(tab);
				that.init(id)
				if(id == 1){
					that.title =  uni.getStorageSync('startUp').title
				}else{
					that.title = title
				}
				// #ifndef MP
				uni.setNavigationBarTitle({
					title: that.title
				})
				// #endif
				that.pageID = id;
				uni.setStorageSync('tab',id)
				uni.pageScrollTo({
					duration: 1,
					scrollTop:0
				})
			}
		},
		
		computed:{
			...mapState(['tabbar']),
		},
		onPullDownRefresh(){
			this.$nextTick(()=>{
				if(that.pageID == 6){
					that.$refs.reserve.reserveList = ''
				}
				that.init(that.pageID)
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1500);
			})
		},
		onReachBottom() {
			this.$nextTick(()=>{
				if(that.pageID == 9){
					if(that.$refs.artList.more){
						that.$refs.artList.page += 1;
						that.$refs.artList.getList();
					}
				}
				if(that.pageID == 5){
					if(that.$refs.storeList.more){
						that.$refs.storeList.goodsType();
					}
				}
			})
		},
		onPageScroll(e) {
				if(that.pageID == 1){
					setTimeout(()=>{
						that.$nextTick(()=>{
							if (e.scrollTop > 100) {
								that.$refs.home.hideBg = 0
								if (that.hideCat != true) {
									that.$refs.home.showShare = false
								}
							} else {
								that.$refs.home.showShare = true
								if(that.$refs.home.chameleon == 1){
									that.$refs.home.hideBg = 1
								}
							}
							if(that.lesson_config == 1){ // 显示了课程入口
								if(that.scrollTop > e.scrollTop || e.scrollTop == 0){ // 上滑动
									that.$refs.home.showLessonDoor = true
								}else{
									that.$refs.home.showLessonDoor = false
								}
								that.scrollTop = e.scrollTop;
							}
							
							if (that.sortListData_) {
								if (e.scrollTop > 300) {
									that.$refs.home.navFixed = true
								}else{
									that.$refs.home.navFixed = false
								}
							}
						})
					},100)
					
				}
				if (e.scrollTop > 100) {
					that.toTop = true;
				} else {
					that.toTop = false
				}
		},
		onShareTimeline() {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.desc,
				query: {share_v_id: vid},
				imageUrl: shareData.imageUrl
			}
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		},
	}
</script>

<style lang="scss" scoped>
	.home-page{
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #F5F5F5;
		overflow-y: auto;
		width: 100vw;
		overflow-x: hidden;
	}
	.tabbar-box{
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		height: 100rpx;
	}
	.tabbar{
		position: fixed;
		width: 100vw;
		background-color: #FFFFFF;
		left: 0;
		bottom: 0;
		z-index: 1000;
		justify-content: space-around;
		padding-bottom: constant(safe-area-inset-bottom); 
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1px solid #F8F8F8;
		height: 100rpx;
		box-sizing: content-box;
		view{
			flex: 1;
			text-align: center;
			text{
				font-size: 24rpx;
				color: #999999;
			}
			.icon{
				display: block;
				width: 54rpx;
				height: 54rpx;
				margin: 0 auto 4rpx;
			}
		}
	}
	
	
</style>
